<template>
    <div>
      <el-dialog :title="dialogType" width="20%"
                 :visible.sync="dialogVisible"
                 :show-close="false"
                 :destroy-on-close="true"
                 :close-on-click-modal="false"
                 :close-on-press-escape="false">
        <div v-show="dialogType === '登录'">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item prop="loginName">
              <el-input v-model="form.loginName" placeholder="支持登录名/手机号登录"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="form.keepLogin">五天内免登录</el-checkbox>
            </el-form-item>
          </el-form>
          <div>
            <el-row>
              <el-col :span="12">
                <el-button type="text">忘了密码?</el-button>
              </el-col>
              <el-col :span="12" style="text-align: right">
                <el-button type="text" @click="dialogType = '注册'">注册新账号</el-button>
              </el-col>
            </el-row>
          </div>
          <div style="text-align: center">
            <el-button @click="login()">登 录</el-button>
          </div>
        </div>
        <div v-show="dialogType === '注册'">
          <el-form :model="registerFrom" :rules="registerRules" ref="registerFrom">
            <el-form-item prop="phone">
              <el-input v-model="registerFrom.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item prop="loginName">
              <el-input v-model="registerFrom.loginName" placeholder="登录名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="registerFrom.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button @click="register()">注 册</el-button>
            <el-button @click="dialogType = '登录'">返 回</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: "loginDialog",
    props:{
      checkLogin: {
        type: Function,
        default: null
      }
    },
    data () {
      return {
        dialogType: '登录',
        dialogVisible: false,
        form: {
          loginName: '',
          password: '',
          keepLogin: false,
        },
        rules: {
          loginName: [
            { required: true, message: '请输入登录名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        },
        registerFrom: {
          phone: '',
          loginName: '',
          password: ''
        },
        registerRules: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' }
          ],
          loginName: [
            { required: true, message: '请输入登录名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {
      // 初始化
      this.init()
    },
    methods: {
      init() {
      },
      showDialog() {
        this.dialogVisible = true;
      },
      login() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const paramObj = Object.assign({}, this.form);
            const result = await this.$api.user.login(paramObj);
            if (result.code === 0) {
              this.$message({
                message: '登录成功',
                type: 'success'
              });
              let expire = 24 * 60 *60;
              if (this.form.keepLogin) {
                expire = expire * 5;
              }
              this.$cookieStore.setCookie("userId", result.data.userId, expire);
              this.$cookieStore.setCookie("token", result.data.token, expire);
              this.checkLogin();
              this.dialogVisible = false;
              this.form = this.$options.data().form;
              this.registerFrom = this.$options.data().registerFrom;
            } else {
              this.$message.error(result.msg);
            }
          } else {
            return false;
          }
        });
      },
      register() {
        this.$refs.registerFrom.validate(async (valid) => {
          if (valid) {
            const paramObj = Object.assign({}, this.registerFrom);
            const result = await this.$api.user.register(paramObj);
            if (result.code === 0) {
              this.$message({
                message: '注册成功',
                type: 'success'
              });
              this.dialogType = '登录';
            } else {
              this.$message.error(result.msg);
            }
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
